<template>
  <div>
    <van-nav-bar
      title="城市列表"
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
    />
    <van-index-bar :index-list="indexList" highlight-color="#4caf50">
      <van-index-anchor index="#">当前城市</van-index-anchor>
      <van-cell :title="dqcs.label" />

      <van-index-anchor index="热">热门城市</van-index-anchor>
      <van-cell
        :title="item.label"
        v-for="(item, index) in hotCity"
        :key="index"
        @click="onClick(item)"
      />
      <div v-for="(value, key) in obj" :key="value.value">
        <van-index-anchor :index="key">{{ key }}</van-index-anchor>
        <van-cell
          :title="item.label"
          v-for="item in obj[`${key}`]"
          :key="item.value"
          @click="onClick(item)"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { getHotCity, getCity } from '@/api/article'
export default {
  name: 'MyCity',
  components: {},
  props: {},
  data() {
    return {
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      dqcs: JSON.parse(window.localStorage.getItem('city')) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      },
      hotCity: [],
      City: [],
      obj: {
        A: [],
        B: [],
        C: [],
        D: [],
        E: [],
        F: [],
        G: [],
        H: [],
        I: [],
        J: [],
        K: [],
        L: [],
        M: [],
        N: [],
        O: [],
        P: [],
        Q: [],
        R: [],
        S: [],
        T: [],
        U: [],
        V: [],
        W: [],
        X: [],
        Y: [],
        Z: []
      }
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await getHotCity()
    console.log(res)
    this.hotCity = [...res.body]
    // getCity
    const res1 = await getCity('1')
    console.log(res1)
    this.City = [...res1.body]
    this.City.forEach((item) => {
      const key = item.short[0].toUpperCase()
      this.obj[key].push(item)
    })
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onClick(city) {
      window.localStorage.setItem('city', JSON.stringify(city))
      this.$router.back()
    },
    onCity(e) {
      window.localStorage.setItem('city', JSON.stringify(e.target.innerHTML))
      this.$router.back()
    }
  }
}
</script>

<style scoped>
::v-deep .van-index-anchor {
  color: #9c9c9c;
}
::v-deep .van-nav-bar {
  background-color: #21b97a;
}
::v-deep .van-ellipsis {
  color: white;
  font-weight: 500;
  font-size: 18px;
}
::v-deep .van-icon-arrow-left:before {
  color: white;
  font-size: 18px;
}
::v-deep .van-index-bar {
  position: fixed;
  top: 45px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
::v-deep element.style {
  color: #fff;
  background-color: #21b97a;
  border-radius: 100%;
  display: inline-block;
  font-size: 12px;
  width: 15px;
  height: 15px;
  line-height: 15px;
}
</style>
